<template>
	<Modal title="开料计划单" ref="popup1" width="80%" noComfirm>
		<view class="table-demo">
			<view class="table">
				<view class="table-loading" v-if="loading">
					<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
				</view>
				<view class="table-tr">
					<view class="table-th">卷号</view>
					<view class="table-th">卷重(KG)</view>
					<view class="table-th">卷料料宽</view>
					<view class="table-th">操作</view>
				</view>
				<view class="table-tr table-empty" v-if="tableData1.length === 0">
					暂无数据
				</view>
				<view class="scroll-wrap">
					<view class="table-tr" v-for="(item, index) in tableData1" :key="index"
						v-if="tableData1.length !== 0">
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.rollNumber || '--' }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.rollWeight }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.rollMaterialWidth }}
							</view>
						</view>
						<view class="table-td">
							<Button small text style="padding: 0;" @click="openModalPrintLabel(item)">打印</Button>
						</view>
					</view>
				</view>
				<view class="table-tr">
					<view class="table-td" style="text-align: right; padding-right: 3rem;">
						卷料料宽:{{rollMaterialWidthSum || '--'}} 卷重合计:{{weightSum || '--'}}
					</view>
				</view>
			</view>
		</view>
		<view class="table-demo" style="margin-top: 3rem;">
			<view class="table">
				<view class="table-loading" v-if="loading">
					<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
				</view>
				<view class="table-tr">
					<view class="table-th">条料用途</view>
					<view class="table-th">材料牌号</view>
					<view class="table-th">条数</view>
					<view class="table-th">条料料宽</view>
					<view class="table-th">客户名称</view>
					<view class="table-th">标识牌号</view>
					<view class="table-th">备注</view>
				</view>
				<view class="table-tr table-empty" v-if="tableData2.length === 0">
					暂无数据
				</view>
				<view class="scroll-wrap">
					<view class="table-tr" v-for="(item, index) in tableData2" :key="index"
						v-if="tableData2.length !== 0">
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.useTo || '--' }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.materialMark }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.itemNum || '--'}}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.materialWidth }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.custom }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.identifyMark }}
							</view>
						</view>
						<view class="table-td">
							<view class="text-overflow-ellipsis">
								{{ item.remarks }}
							</view>
						</view>
					</view>
				</view>
				<view class="table-tr">
					<view class="table-td" style="text-align: right; padding-right: 3rem;">
						料宽合计:{{materialWidthSum || '--'}} 利用率:{{rate || '--'}}
					</view>
				</view>
			</view>
		</view>
	</Modal>
</template>

<script>
	import Modal from '@/components/modal/index.vue';
	import fetch from "@/utils/fetch";
	import util from "@/utils/util";
	import Button from "@/components/button/index.vue";

	export default {
		components: {
			Modal,
			Button
		},
		data() {
			return {
				rollMaterialWidthSum: '',
				weightSum: '',
				materialWidthSum: '',
				rate: '',
				tableData1: [],
				tableData2: [],
				loading: false,
			}
		},
		methods: {
			open(cuttingPlanCode) {
				this.getData(cuttingPlanCode);
				this.$refs.popup1.open();
			},
			openModalPrintLabel(row) {
				const that = this;
				const rollWeight = row.rollWeight + '' //content为字符串类型  传入数字导致无法弹窗
				uni.showModal({
					title: '请输入卷重',
					confirmText: '打印',
					placeholderText: '（选填）卷重，默认' + row.rollWeight,
					cancelColor: "#FF0606",
					editable: true,
					success: function(res) {
						let data = {
							...row
						};
						if (res.confirm) {
							if (res.content) {
								if (parseFloat(res.content) <= 0) {
									that.$toast('打印未执行：输入卷重范围大于0');
								} else if (parseFloat(res.content) > row.rollWeight) {
									that.$toast('打印未执行：输入卷重范围不能超过' + row.rollWeight);
								} else {
									data.rollWeight = parseFloat(res.content)
									that.remotePrint(data);
								}
							} else {
								that.remotePrint(data);
							}
						}
					}
				});
			},
			remotePrint(row) {
				const data = {
					deviceCode: row.deviceCode,
					list: [],
				};
				const arr = this.tableData2;
				let index = 0;
				for (let i = 0; i < arr.length; i++) {
					for (let j = 0; j < arr[i].itemNum; j++) {
						const code = util.getUuid(14);
						// let quantity = (row.rollWeight / row.rollMaterialWidth) *
						// 	arr[i].materialWidth;
						// quantity = Math.floor(quantity * Math.pow(10, 3)) / Math.pow(10, 3);
						console.log(row.rollWeight,'row.rollWeight');
						console.log(arr[i].materialWidth,'arr[i].materialWidth');
						console.log(row.rollMaterialWidth,'row.rollMaterialWidth');
						console.log(`row.rollWeight * arr[i].materialWidth / row.rollMaterialWidth`);
						 let quantity = Math.floor(
						        (row.rollWeight * 10000 * arr[i].materialWidth) / row.rollMaterialWidth
						      ) / 10000;
						      
						data.list.push({
							custom: arr[i].custom,
							materialLevel: index + 1,
							materialMark: arr[i].materialMark,
							materialWidth: arr[i].materialWidth,
							orderCode: arr[i].orderCode,
							quantity,
							rollNumber: row.rollNumber,
							tagSerialNumber: code,
						});
						index++;
					}
				}
				console.log(data, 'czqczqzcq');
				fetch('post', '/dms/labelPrinting/printCuttingPlan', null, data).then((res1) => {
					console.log('res1=>', res1);
					fetch('post', '/dms/labelPrinting/print', null, res1).then((res2) => {
						console.log('res=>', res2);
						// this.$toast('已发送打印任务');
					});
				});
			},
			// 获取数据
			getData(cuttingPlanCode) {
				this.loading = true
				fetch('get', '/dms/materialCuttingPlan/selectCuttingPlan', null, {
					cuttingPlanCode,
				}).then((res) => {
					this.loading = false;
					this.tableData1 = res.plan1;
					this.tableData2 = res.plan2;
					this.rollMaterialWidthSum = res.rollMaterialWidthSum;
					this.materialWidthSum = res.materialWidthSum;
					this.weightSum = res.weightSum;
					this.rate = res.rate;
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.table-demo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.table {
		width: 100%;
		display: flex;
		flex-direction: column;
		border: 1px solid #ecf0f2;
		border-radius: 2rem;
		overflow: hidden;
		position: relative;

		.table-loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
		}

		.table-empty {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 0;
			font-size: 2rem;
		}

		.scroll-wrap {
			height: 20rem;
			overflow: auto;
			overflow-x: hidden;
		}

		.table-tr {
			display: flex;
			flex-direction: row;
			border-top: 1px solid #ecf0f2;
		}

		.table-th {
			flex: 1;
			background: #edf1f3;
			font-size: 2rem;
			text-align: center;
			padding: 2rem 0;
			overflow: hidden;
		}

		.table-td {
			flex: 1;
			font-size: 2rem;
			text-align: center;
			padding: 1.8rem 0;
			overflow: hidden;
		}

		.text-overflow-ellipsis {
			width: 80%;
			padding: 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: 0 auto;
		}
	}
</style>